<script>
import {
  getAddCounselor,
  getDelete,
  getEditCounselor,
  getTableList,
  getTeacher,
  getUserLabel
} from "@/utils/class/counselor";
import {getToken} from "@/utils/auth";

export default {
  name: "counselorMan",
  data() {
    return {
      teacherId: '',
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      action: process.env.VUE_APP_BASE_API + "/common/upload",
      url: 'http://1.117.81.216:8086/stage-api/system/teacher',
      //头像

      options: [],
      labelList: [],
      userValue: '',
      labelValue: [],
      formInline: {
        name: '',
        phone: ''
      },
      currentType: '0',
      //表格
      tableData: [],
      //参数
      query: {
        pageSize: '1000',
        pageNum: '1',
        name: '',
        mobile: '',
        phone: '',
        avatar: '',
        gender: '',
        profession: '',
        infos: '',
        status: '',
        location: '',
        count: '',
        delFlag: '',
        createBy: '',
        createTime: '',
        updateBy: '',
        updateTime: '',
        remark: '',
      },
      //添加接口参数
      addQuery: {
        name: '',
        mobile: '',
        phone: '',
        avatar: '',
        gender: '',
        profession: '',
        infos: '',
        location: '',
        labels: [],
        userId: "",
        weight: ''
      },
      //编辑接口参数
      editQuery: {
        name: '',
        mobile: '',
        phone: '',
        avatar: '',
        profession: '',
        infos: '',
        location: '',
        labels: [],
        id: '',
      },

      dialogVisible: false,
      //对话框
      user: '',
      imageUrl: '',
      num: '',
      myPhone: '',
      label: '',
      good: '',
      teacher: '',
      address: '',
      total: 0,
      pagination: {
        defaultPageSize: 5,
        current: 1,
      },
      flag: false,
      //表单校验
      ruleForm: {
        good: '',
        teacher: '',
        address: '',
      },
      rules: {
        good: [
          {required: true, message: '请输入专业擅长', trigger: 'blur'},
        ],
        teacher: [
          {required: true, message: '请输入老师简介', trigger: 'blur'},
        ],
        address: [
          {required: true, message: '请输入办公地址', trigger: 'blur'},
        ],

      }
    }

  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getTable()
    },
    changeLabel(val) {
      // console.log(val)
      this.addQuery.labels = val
    },
    //添加change
    changeId(val) {
      this.addQuery.name = this.options.filter(item => {
        return item.userId === val
      })[0].nickName
      this.addQuery.mobile = this.options.filter(item => {
        return item.userId === val
      })[0].phonenumber
      // console.log(this.addQuery.name)
      this.addQuery.userId = val
    },
    //权重
    handleChange(value) {
      console.log(value);
    },
    //重置
    reset() {
      this.formInline.name = ''
      this.query.name = ''
      this.query.mobile = ''
      this.formInline.phone = ''
      this.getTable()
      this.$message.success('已重置')
    },
    //查询
    onSubmit() {
      this.query.name = this.formInline.name
      this.query.mobile = this.formInline.phone
      //this.query.phone = this.formInline.phone
      this.getTable()
      this.$message.success('已查询')
    },
    //打开添加
    increase() {
      this.dialogVisible = true
      this.imageUrl = ''
      this.user = ''
      this.num = 0
      this.myPhone = ''
      this.label = ''
      this.ruleForm.good = ''
      this.ruleForm.teacher = ''
      this.ruleForm.address = ''

    },
    //打开编辑
    edit(row) {
      this.flag = true
      //console.log(row)
      this.teacherId = row.id
      this.dialogVisible = true
      this.currentType = 1
      this.imageUrl = row.avatar
      this.user = row.name
      this.num = row.weight
      this.myPhone = row.phone
      this.label = row.labels
      this.ruleForm.good = row.profession
      this.ruleForm.teacher = row.infos
      this.ruleForm.address = row.location

    },
    //添加、编辑完保存
    sure() {
      if (this.currentType === '0') {
        // console.log(1)
        this.dialogVisible = false
        this.addQuery.avatar = this.imageUrl
        this.addQuery.phone = this.myPhone
        this.addQuery.profession = this.ruleForm.good
        this.addQuery.infos = this.ruleForm.teacher
        this.addQuery.weight = Number(this.num)
        this.addQuery.location = this.ruleForm.address
        getAddCounselor(this.addQuery).then(res => {
          // console.log(res)
          this.$message.success('添加成功')
          this.getTable()
        })
      } else {
        this.dialogVisible = false
        this.editQuery.avatar = this.imageUrl
        this.editQuery.name = this.user
        this.editQuery.weight = this.num
        this.editQuery.id = this.teacherId
        this.editQuery.profession = this.ruleForm.good
        this.editQuery.infos = this.ruleForm.teacher
        this.editQuery.location = this.ruleForm.address
        this.editQuery.phone = this.myPhone
        getEditCounselor(this.editQuery).then(res => {
          // console.log(res)
          this.getTable()
          this.$message.success('编辑成功')
        })
      }

    },
    //删除
    delCoun(item) {
      //console.log(item)
      this.removeList = item
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getDelete(item.id).then(res => {
          // console.log(res)
          this.getTable()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //头像
    handleAvatarSuccess(res, file) {
      //console.log(file.response.url)
      this.imageUrl = file.response.url
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    getTable() {
      //表格渲染封装
      getTableList(this.query).then(res => {
        //console.log(res)
        this.tableData = res.rows
        this.total = Number(res.total)
      })
    }

  },
  created() {
    //表格渲染
    this.getTable()
    //选择用户渲染
    getTeacher().then(res => {
      // console.log(res)

      this.options = res.rows
    })
    //选择标签
    getUserLabel().then(res => {
      //console.log(res)
      this.labelList = res.rows
    })
    //头像
    // getSculpture().then(res => {
    //   console.log(res)
    // })

  }
}
</script>
<template>
  <div>
    <div class="container">
      <div style="padding: 40px">
        <div class="header">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="formInline.phone" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="reset">重置</el-button>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--        添加按钮-->
        <div class="add-btn">
          <el-button type="primary" @click="increase">添加</el-button>
        </div>
        <!--        添加、编辑模态框-->
        <div>
          <el-dialog
            :title="currentType === '0' ? '添加' : '编辑'"
            :visible.sync="dialogVisible"
            width="50%">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
              <div class="head-sculpture">
                <p>头像</p>
                <el-upload
                  :action="action"
                  :before-upload="beforeAvatarUpload"
                  :headers="headers"
                  :on-success="handleAvatarSuccess"
                  :show-file-list="false"
                  class="avatar-uploader">
                  <img v-if="imageUrl" :src="`http://1.117.81.216:8086/stage-api${this.imageUrl}`"
                       alt="" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <div class="select">
                <p>选择用户</p>
                <el-select v-model="user" :disabled="flag" placeholder="请选择"
                           style="margin-top: 8px;margin-left: 48px;" @change="changeId">
                  <el-option
                    v-for="item in options"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="weight">
                <div><p>权重</p></div>
                <div class="inputWeight">
                  <el-input-number v-model="num" :max="100" :min="0" controls-position="right"
                                   style="margin-left: 75px;margin-top: 5px;width: 221px"
                                   @change="handleChange"></el-input-number>
                </div>
              </div>
              <div class="label">
                <div>
                  <p>办公电话</p>
                </div>
                <div>
                  <el-input v-model="myPhone" placeholder="请输入内容"
                            style="float: left;width: 221px;margin-left: 48px;margin-top: 10px"></el-input>
                </div>
              </div>
              <div class="labelf">
                <div>
                  <p>标签设置</p>
                </div>
                <div>
                  <el-select v-model="label" multiple placeholder="请选择"
                             style="margin-top: 8px;margin-left: 48px;" @change="changeLabel(label)">
                    <el-option
                      v-for="item in labelList"
                      :label="item.label"
                      :value="item.label">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="better">
                <el-form-item label="专业擅长" prop="good">
                  <el-input
                    v-model="ruleForm.good"
                    placeholder="请输入内容"
                    resize="none"
                    type="textarea">
                  </el-input>
                </el-form-item>
              </div>
              <div class="teacher">
                <el-form-item label="老师简介" prop="teacher">
                  <el-input
                    v-model=" ruleForm.teacher"
                    placeholder="请输入内容"
                    resize="none"
                    type="textarea">
                  </el-input>
                </el-form-item>
              </div>
              <div class="office">
                <el-form-item label="办公地址" prop="address">
                  <el-input
                    v-model="ruleForm.address"
                    placeholder="请输入内容"
                    resize="none"
                    type="textarea">
                  </el-input>
                </el-form-item>

              </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure">保 存</el-button>
  </span>

          </el-dialog>
        </div>
        <div class="main" style="margin-top: 20px">
          <el-table
            :data="tableData"
            border
            style="width: 100%; text-align: center"
          >
            <el-table-column
              label="序号"
              type="index"
              width="150">
            </el-table-column>
            <el-table-column
              label="用户名称"
              prop="name"
              width="145">
            </el-table-column>
            <el-table-column
              label="联系电话"
              prop="mobile"
              width="145">
            </el-table-column>
            <el-table-column
              label="办公电话"
              prop="phone"
              width="145">
            </el-table-column>
            <el-table-column
              label="地址"
              prop="location"
              width="458">
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
              width="180"
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="145"
            >
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="edit(scope.row)">编辑</el-button>
                <el-button size="small" type="text" @click="delCoun(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--              分页按钮-->
        <div class="pag-btn" style="margin-top: 30px;float: right">
          <el-pagination
            :page-size="10"
            :pagination="pagination"
            :total="total"
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cell {

}

::v-deep.el-table th.el-table__cell > .cell {
  text-align: center;
}

::v-deep.head-sculpture {

  height: 150px;
  // border: 1px solid;

  p {
    margin-left: 10px;
    float: left;
    font-weight: 600;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    margin-left: 80px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }

  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
}

::v-deep.select {
  height: 50px;
  //border: 1px solid;
  margin-top: 10px;

  p {
    margin-left: 10px;
    margin-top: 16px;
    float: left;
    font-weight: 600;
  }
}

::v-deep.weight {
  height: 50px;
  //border: 1px solid;
  margin-top: 10px;

  p {
    float: left;
    margin-top: 14px;
    margin-left: 10px;
    font-weight: 600;
  }
}

::v-deep.label {
  height: 50px;
  //border: 1px solid;
  margin-top: 10px;

  p {
    margin-top: 15px;
    float: left;
    margin-left: 10px;
    font-weight: 600;
  }
}

::v-deep.labelf {
  height: 50px;
  margin-top: 10px;
  //border: 1px solid;
  display: flex;

  p {
    margin-left: 10px;
    margin-top: 15px;
    font-weight: 600;
  }

  .el-input__inner {
    width: 500px;
  }
}

::v-deep.better {
  .el-textarea__inner {
    margin-top: -24px;
    width: 500px;
    height: 80px;
    margin-left: 115px;
  }

  .el-form-item__error {
    margin-left: 115px;
  }
}

::v-deep.teacher {
  .el-textarea__inner {
    margin-top: -24px;
    width: 500px;
    height: 80px;
    margin-left: 115px;
  }

  .el-form-item__error {
    margin-left: 115px;
  }
}

::v-deep.office {
  .el-textarea__inner {
    margin-top: -24px;
    width: 500px;
    height: 80px;
    margin-left: 115px;
  }

  .el-form-item__error {
    margin-left: 115px;
  }
}

</style>
